<style type="text/css">
    #traceTabs a {
        font-size: 13px;
    }
    .tab-content .tab-pane {
        width: 100%;
        height: 100%;
    }
    .app-title {
        text-align:center;
        line-height:30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overow: ellipsis;
    }
    .timeline {
    	width:100%;
    	height:100%;
    	overflow:auto;
    	font-size:11px;
    	padding-top:2px;
    }
    .timeline-bar {
    	position:absolute;
    	width:100%;
    	border-bottom:1px solid #D3D3D3;
    	font-family:Verdana;
    }
    .timeline-bar-selected {
    	background-color:orange;
    }
    .timeline-bar > div {
    	cursor:pointer;
    	margin-top:1px;
    	margin-bottom:1px;
    	padding-top:2px;
    	padding-bottom:2px;
    	border-radius:4px;
    }
    .timeline-bar-frame {
    	width:100%;
    	padding-left:4px;
    	overflow-x:visible;
    }
    .timeline-bar-frame > span {
    	white-space:nowrap;
    	position:relative;
    	top:0px;
    }
</style>

<div class="navbar navbar-fixed-top" style="height:30px;min-height: 30px;background-color:#252a3a;color:#ddd;font-size:11px;">
    <div class="row">
        <div class="col-md-3 app-title" title="{{transactionDetail.applicationName}}" data-toggle="tooltip" data-placement="bottom">Application : {{transactionDetail.applicationName}}</div>
        <div class="col-md-3 app-title" title="{{transactionDetail.transactionId}}" data-toggle="tooltip" data-placement="bottom">TransactionId : {{transactionDetail.transactionId}}</div>
        <div class="col-md-3 app-title" title="{{transactionDetail.agentId}}" data-toggle="tooltip" data-placement="bottom">AgentId : {{transactionDetail.agentId}}</div>
        <div class="col-md-3 app-title" title="{{transactionDetail.applicationId}}" data-toggle="tooltip" data-placement="bottom">ApplicationName : {{transactionDetail.applicationId}}</div>
    </div>
</div>

<ul id="traceTabs" class="nav nav-tabs navbar-fixed-top" style="top:32px;">
    <li class="active"><a href="#CallStacks" data-toggle="tab">Call Tree</a></li>
    <li><a href="#ServerMap" data-toggle="tab">Server Map</a></li>
    <li><a href="#Timeline" data-toggle="tab">Timeline</a></li>
    <li><a href ng-click="openTransactionView();">Mixed View</a></li>
    <li ng-show="logLinkEnable">
   		<a href="{{logPageUrl}}" ng-click="viewLog(logPageUrl)" style="{{loggingTransactionInfo ? '' : 'color:#BBBABA'}}">{{logButtonName}}</a>
    </li>
    <li style="padding-left:10px;padding-top:1px;">
    	<div class="input-group" style="width:220px">
    		<span class="input-group-addon">Self >=</span>
      		<input type="number" class="form-control" placeholder="1000(ms)" ng-model="searchMinTime" style="background-color:beige">
      		<span class="input-group-btn"><button class="btn btn-default btn-info" type="button" ng-click="searchCall()"><span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span></button></span>
    	</div>
    </li>
    <li style="padding-top:8px;padding-left:10px;color:#FF0000"><span>{{searchMessage}}</span></li>
    <li style="position: absolute; top: 6px; right: 10px;">
    	<span class="glyphicon glyphicon-question-sign callTreeTooltip" style="cursor:pointer;font-size:15px;top:4px;padding-right:10px;"></span>
        <span class="label" ng-class="completeStateClass"><span class="glyphicon glyphicon-th-list"></span> {{transactionDetail.completeState}}</span>
        <button ng-click="openInNewWindow();$event.stopPropagation()" class="btn btn-default btn-xs" target="_blank" title="New Window" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-share"></span></button>
    </li>
</ul>

<div class="tab-content" style="width:100%;height:100%;overflow:auto;">
    <div class="tab-pane active" id="CallStacks">
        <!-- begin new call stack -->
        <!--<call-stacks namespace="forTransactionDetail"></call-stacks>-->
        <distributed-call-flow-directive namespace="forTransactionDetail"></distributed-call-flow-directive>

        <div ng-include=" 'error' "></div>
        <div ng-include=" 'warning' "></div>
        <div ng-include=" 'info' "></div>
        <div ng-include=" 'loading' "></div>
    </div>

    <div class="tab-pane" id="ServerMap">
        <server-map-directive></server-map-directive>
    </div>

    <div class="tab-pane" id="Timeline">
        <timeline-directive></timeline-directive>
    </div>

    <div class="tab-pane" id="Details">
        <!-- begin details -->
        <table id="businessTransactions" class="table table-bordered table-hover" style="font-size:12px;">
            <thead>
            <tr>
                <th>#</th>
                <th>Action</th>
                <th>Arguments</th>
                <th>EndPoint</th>
                <th>Total[ms]</th>
                <th>Application</th>
                <th>Agent</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>